<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Profile</title>
    <link rel="stylesheet" href="css/Personal.css">
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <script src="./element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/global.css">

    <script src="./js/axios.js"></script>
</head>
<body>

<div id="app">
    <el-header>
        <el-container>
            <div>
                <el-tabs v-model="menu1" @tab-click="handleClick">
                    <el-tab-pane label="首页" name="first"></el-tab-pane>
                </el-tabs>
            </div>
            <div>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <div>
                <el-dropdown split-button type="primary">
                    发布文章
                    <el-dropdown-menu>
                        <el-dropdown-item icon="el-icon-document">草稿箱</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{isLogin:false}">
                <el-button type="primary" @click="open" plain>
                    <span>登陆</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>注册</span>
                </el-button>
            </div>
            <div v-if="{isLogin:false}">
                <el-dropdown>
                    <i class=" el-icon-message-solid" style="font-size:30px;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>评论</el-dropdown-item>
                        <el-dropdown-item>赞和收藏</el-dropdown-item>
                        <el-dropdown-item>新增粉丝</el-dropdown-item>
                        <el-dropdown-item>私信</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div v-if="{isLogin:false}">
                <div>
                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                </div>
            </div>
        </el-container>
    </el-header>


    <div class="container">
        <div class="left-column">
            <div  class="user-info-block block shadow">
                <el-card>
                    <div class="profile-row">
                        <img :src="user.userPic" alt="用户头像" class="avatar">
                        <div>
                            <h1 class="username">
                                <span>{{user.userName}}</span>
                            </h1>
                            <p class="description">{{user.userIntroduce}}</p>
                        </div>
                        <div class="button-container">
                            <el-button type="primary" @click="redirectToSettings">设置</el-button>
                        </div>
                                            </div>
                </el-card>
            </div>
            <div class="header-content">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="">
                    <el-menu-item index="1" class="nav-item" @click="showComponent('AddArticle')">
                        文章
                    </el-menu-item>
                    <el-menu-item index="2" class="nav-item" @click="showComponent('Likes')">
                        点赞
                    </el-menu-item>
                    <el-menu-item index="3" class="nav-item" @click="showComponent('Collections')">
                        收藏
                    </el-menu-item>
                    <el-menu-item index="4" class="nav-item not-in-scroll-mode" @click="showComponent('Follows')">
                        关注
                    </el-menu-item>
<%--                    <el-menu-item index="5" class="search-icon-container">--%>
<%--                            <img src="//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/4faa6e4d3204581da39135d50cec3f73.svg" alt="" class="search-icon">--%>
<%--                    </el-menu-item>--%>
                </el-menu>
               <div v-if="activeComponent ==='AddArticle'">
                <ul>
                   <li v-for="article in articles1">
                       <!-- <el-container style="border: 1px pink solid;"> -->
                       <el-container>
                           <el-main>
                               <el-button @click="">
                               </el-button>
                               <h3 @click.native="">{{article.articleTitle}}</h3>
                               <%--                                        <p>--%>
                               <%--                                            如果你，你想增加你的共组效率，并且往更高阶的前端迸发，条是的能路是必不可少的，另外deb…</p>--%>
                               <%--                                        <p>--%>
                               <el-link href="" target="_blank" icon="el-icon-user">{{article.userName}}</el-link>
                               <el-divider direction="vertical"></el-divider>
                               <span>
                                                    <i class="el-icon-view">{{article.articleSee}}</i>
                                                </span>
                               <el-divider direction="vertical"></el-divider>
                               <span>
                                                    <i class="el-icon-plus">173</i>
                                            </span>
                               <el-divider direction="vertical"></el-divider>
                               <span>
                                                    <i class="el-icon-alarm-clock">{{article.articleDate}}</i>
                                            </span>
                               </p>
                           </el-main>
                           <el-aside width="200px" style="overflow: hidden;">
                               <el-image style="width: 200px;" src="./img/article_pic0.image"
                                         :fit="fit"></el-image>
                           </el-aside>
                       </el-container>
                       <el-divider direction="horizontal"></el-divider>
                   </li>
               </ul></div>

                <el-card v-for="folder in folders" class="box-card" v-if="activeComponent === 'Collections'">
                    <div slot="header" class="clearfix" >
                        <span>{{folder.favoriteFolderName}}</span>
                        <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
                    </div>

                    <div class="bottom">
                        <time>{{folder.favoriteFolderDate}}</time>
                        <div class="meta right">
        <span class="item">
          <i class="el-icon-document"></i>
          文章数量12
        </span>
                            <span class="item">
          <i class="el-icon-star-off"></i>
          订阅者数量0
        </span>
                        </div>
                    </div>
                </el-card>

                <div v-if="activeComponent ==='Likes'">
                    <ul>
                        <li v-for="article in articles2">
                            <!-- <el-container style="border: 1px pink solid;"> -->
                            <el-container>
                                <el-main>
                                    <el-button @click="">
                                    </el-button>
                                    <h3 @click.native="">{{article.articleTitle}}</h3>
                                    <%--                                        <p>--%>
                                    <%--                                            如果你，你想增加你的共组效率，并且往更高阶的前端迸发，条是的能路是必不可少的，另外deb…</p>--%>
                                    <%--                                        <p>--%>
                                    <el-link href="" target="_blank" icon="el-icon-user">{{article.userName}}</el-link>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>
                                                    <i class="el-icon-view">{{article.articleSee}}</i>
                                                </span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span>
                                                    <i class="el-icon-plus">173</i>
                                            </span>
                                    <el-divider direction="vertical"></el-divider>
<%--                                    <span>--%>
<%--                                                    <i class="el-icon-alarm-clock">{{article.articleDate}}</i>--%>
<%--                                            </span>--%>
                                    </p>
                                </el-main>
                                <el-aside width="200px" style="overflow: hidden;">
                                    <el-image style="width: 200px;" src="./img/article_pic0.image"
                                              :fit="fit"></el-image>
                                </el-aside>
                            </el-container>
                            <el-divider direction="horizontal"></el-divider>
                        </li>
                    </ul></div>
<%--                <div class="user-info">--%>
<%--                    <div class="avatar">--%>
<%--                        <el-avatar :src="avatarUrl"></el-avatar>--%>
<%--                    </div>--%>
<%--                    <div class="info">--%>
<%--                        <el-link :href="userInfoUrl" target="_blank" class="username">--%>
<%--                            <span class="name">Java中文社群</span>--%>
<%--                        </el-link>--%>
<%--                        <el-link :href="userInfoUrl" target="_blank">--%>
<%--                            <el-image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a070131b0b34e729a1c6b0cdcda2dc7~tplv-k3u1fbpfcp-jj:0:0:0:0:q75.avis" alt="创作等级LV.7" class="rank"></el-image>--%>
<%--                        </el-link>--%>
<%--                        <div class="detail">--%>
<%--                            www.javacn.site--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                    <el-button type="primary" class="follow-btn">已关注</el-button>--%>
<%--                </div>--%>
            </div>
        </div>
        <div class="right-column">
            <!-- 右侧内容区域，可根据需要添加内容 -->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>个人成就</span>
                </div>
                <!-- 统计项 -->
                <div class="stat-item" v-for="item in stats" :key="item.title">
                    <svg-icon :icon-class="item.iconClass" width="25" height="25"></svg-icon>
                    <span class="content">
            {{ item.title }}
            <span class="count">{{ item.count }}</span>
        </span>
                </div>


            </el-card>
            <el-card class="user-card">
                <el-link
                        href="/user/1590344390294795/following"
                        class="follow-item"
                        :underline="false"
                        :class="{'router-link-exact-active route-active': isActive}"
                >
                    <div class="item-title">关注了</div>
                    <div class="item-count">0</div>
                </el-link>
                <el-link
                        href="/user/1590344390294795/followers"
                        class="follow-item"
                        :underline="false"
                >
                    <div class="item-title">关注者</div>
                    <div class="item-count">1</div>
                </el-link>
                <el-link
                        href="/user/1590344390294795/collections"
                        class="follow-item"
                        :underline="false">
                    <div class="item-title">收藏集</div>
                    <div class="item-count">13</div>
                </el-link>
            </el-card>

        </div>
    </div>
</div>
<script src="./js/Personal.js"></script>

</body>
</html>
